<template>
    <div class="findpass" style="overflow:hidden;-webkit-app-region: drag">
        <div class="bodyBox">
            <div class="boxTop">
                找回密码
                <div class="imgBox">
                    <img src="../../assets/img/login/images/findpasas_03.png" alt="" @click="close" style="-webkit-app-region: no-drag;">
                </div>
            </div>
            <div class="stepone">
                <div class="onebigStep">
                    <div class="onesmall">
                        1
                    </div>    
                </div>
                <div class="line"></div>
                <div class="onebigStep twobigStep">
                    <div class="onesmall twosmall">
                        2
                    </div>    
                </div>
            </div>
            <div class="userinput">
                账号
                <input type="text" v-model="userdata" placeholder="请输入您的用户名" class="username" minlength="2" maxlength="11" v-on:blur="user" style="-webkit-app-region: no-drag;">
                <div class="error" :class="{errordata:usershow}">
                    <img src="../../assets/img/login/images/error_03.png" alt="" :class="{errordata:showuserimg}">
                    <span class="spanone" :class="{errordata:showuser}">用户名不存在，请重新输入</span>
                    <span class="spanone" :class="{errordata:showusername}">限制输入2-11个字，请重新输入</span>
                </div>
            </div>
            <div class="userinput queinput">
                密保问题
                <img src="../../assets/img/plan/images/select_06.png" alt="" class="dropdown" style="-webkit-app-region: no-drag;">
                <select v-model="value" class="username" style="-webkit-app-region: no-drag;">
                    <option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </option>
                </select>
            </div>
            <div class="userinput queinput">
                问题答案
                <input type="text" v-model="ansdata" placeholder="请输入密保问题答案" class="username" @change="answer" style="-webkit-app-region: no-drag;">
                <div class="error" :class="{errordata:showdaerror}">
                    <img src="../../assets/img/login/images/error_03.png" alt="" :class="{errordata:showdaimg}">
                    <span class="spanone" :class="{errordata:showda}">答案超出20个字，请重新输入</span>
                    <span class="spanone" :class="{errordata:showdanerror}">密保问题回答错误，请重新输入</span>
                </div>
            </div>
            <div class="nextstep" @click="nextstep" style="-webkit-app-region: no-drag;">
                下一步
            </div>
        </div>
    </div>
</template>
<script>
if (window.require) {
  var ipc = window.require('electron').ipcRenderer
}
import https from '@/public/https'
export default {
    name:"FindPass",
    data(){
        return{
            userdata:"",
            options: [{
            value: '0',
            label: '选择一个密保问题'
            }, {
            value: '1',
            label: '您的出生城市？'
            }, {
            value: '2',
            label: '您的母亲姓名？'
            }, {
            value: '3',
            label: '您的出生日期？'
            }, {
            value: '4',
            label: '您的父亲姓名？'
            }],
            value: '0',
            ansdata:"",
            showdaerror:true,
            showdaimg:true,
            showda:true,
            usershow:true,
            showuserimg:true,
            showuser:true,
            showdaerror:true,
            showusername:true,
            showdanerror:true
        }
    },

    methods:{
        user:function(){
            this.userdata =  this.userdata.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/g,'');
            if(this.userdata.length>11||this.userdata.length<2){
                this.usershow=!this.usershow;
                this.showuserimg = !this.showuserimg;
                this.showusername=!this.showusername;
            }else{
                this.usershow=true;
            }
        },
        answer:function(){
            if(this.ansdata.length>20){
                this.showdaerror=!this.showdaerror;
                this.showdaimg = !this.showdaimg;
                this.showda=!this.showda;
            }else{
                this.showdaerror=true
            }
        },
        nextstep:function(){
            if(!this.userdata){
                this.$message({
                    type:'warning',
                    message:'请输入用户名'
                })
                return
            }
            if(!this.value){
                this.$message({
                    type:'warning',
                    message:'请选择密保问题'
                })
                return
            }
             if(!this.ansdata){
                this.$message({
                    type:'warning',
                    message:'请输入密保答案'
                })
                return
            }

            https.post("common/postForgetPassword",{user_name:this.userdata,question_id:this.value,answer:this.ansdata},'post').then(data=>{
                if(data.status == 1){
                    this.$router.push('FindPasstwo')
                } else {
                    this.$message.error({message:this.data.message});
                }
            })
        },
        close:function(){  //关闭注册页
            ipc.send('pwdwindow-close');
        }
    }
}
</script>
<style lang="less" scoped>
    @import url(../../assets/css/login/public.less);
    @import url(../../assets/css/login/findpass.less);
</style>
<style>
.el-input__inner{
    border:none;
}
.el-input{
    font-size: 0.14px;
}
.el-input__inner{
    color:#999999 !important;
    padding:0;
    height: 35px;
    line-height: 37px;
}
.el-select-dropdown{
    left: 248px !important;
    padding-left: 5px;
}
.el-select .el-input .el-select__caret{
    opacity: 0;
}
.el-select-dropdown__item{
    font-size: 14px;
    color:#333333;
}
.el-select-dropdown__item.selected{
    color:#333333;
    font-weight: 400;
}
.el-input__prefix, .el-input__suffix{
    z-index: 99;
}
</style>



